<template>
  <div class="tutorial">
    <h2>🔍 缩放过渡动画教程</h2>
    <p>使用 scale + opacity 实现弹性缩放的出现与离开效果。</p>

    <button class="btn" @click="show = !show">{{ show ? '隐藏' : '显示' }}示例</button>

    <transition name="zoom">
      <div v-if="show" class="demo-box">缩放示例区域</div>
    </transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

<style scoped>
.tutorial { padding: 20px; }
.btn { padding:8px 12px; background:#f59e0b; color:#fff; border:none; border-radius:6px; cursor:pointer; }
.btn:hover { background:#d97706; }
.demo-box { margin-top:12px; padding:20px; border-radius:12px; background:#fff7ed; border:1px solid #fed7aa; }

.zoom-enter-active, .zoom-leave-active { transition: all .28s ease; }
.zoom-enter-from, .zoom-leave-to { transform: scale(0.92); opacity: 0; }
.zoom-enter-to, .zoom-leave-from { transform: scale(1); opacity: 1; }
</style>